<template>
    <!-- 印章申请 -->
    <div class="addSealAdmin">
        <div class="padding15All flexbetween" style="height:50px;box-sizing:border-box;border-bottom:2px solid #F5F6F7">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ name: 'sealAdmin' }">我的印章</el-breadcrumb-item>
                <el-breadcrumb-item>印章申请</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="height:15px;background-color: #F5F6F7;"></div>
        <div class="padding15All">
            <el-form :model="ruleForm" label-width="100px">
                <!-- <div class="title-form">
                    <span>基本信息</span>
                </div>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="印章名称" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="仅用于区分印章，最多支持50个字符"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="margin-top3"></div>
                <hr> -->
                <div class="margin-top3"></div>
                <el-col :span="8" style="margin-right:20px;">
                    <div class="title-form">
                        <span>制章内容</span>
                    </div>
                    <el-row>
                        <el-col>
                            <el-form-item label="制章方式">
                                <!-- <el-button> 模板印章 </el-button> -->
                                <el-button> 手绘印章 </el-button>
                            </el-form-item>
                            <el-form-item label="手绘印章">
                                <div class="hui">1、点击绘制印章，使用手机扫描二维码后进行绘制签名</div>
                                <div class="hui">2、提交生成印章后即可在印章管理列表页中查看</div>
                            </el-form-item>
                            <el-form-item>
                                <div class="upimg pointer flexcolumn" :class="{'bg':sealImg!==''}" @click="addSeal" :style="{'background-image':'url('+sealImg+')'}" style="background-size:100% 100%;">
                                    <i class="el-icon-circle-plus" style="font-size: 40px; color: #0975e0;"></i>
                                    <div style="color: #0975e0;">绘制印章</div>
                                    <p @click="addSeal">重新添加手绘印章</p>
                                </div>
                            </el-form-item>
                            <!-- <el-form-item label="印章样式" prop="name">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="selectSeal active">
                                            <div class="img flexcenter">
                                                <img src="https://asset.tsign.cn/apps/saas-microfe/seal-manage-front/prod/1.7.2/img/yxz_new.914df624.png"
                                                    alt="">
                                            </div>
                                            <p>圆形章-五角星</p>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="selectSeal">
                                            <div class="img flexcenter">
                                                <img src="https://asset.tsign.cn/apps/saas-microfe/seal-manage-front/prod/1.7.2/img/yxz_new.914df624.png"
                                                    alt="">
                                            </div>
                                            <p>圆形章-五角星</p>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="selectSeal">
                                            <div class="img flexcenter">
                                                <img src="https://asset.tsign.cn/apps/saas-microfe/seal-manage-front/prod/1.7.2/img/yxz_new.914df624.png"
                                                    alt="">
                                            </div>
                                            <p>圆形章-五角星</p>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="印章颜色" prop="name">
                                <div class="flexleft">
                                    <div class="color flexcenter active" style="background:red;">
                                        <i class="el-icon-check"></i>
                                    </div>
                                    <div class="color  flexcenter" style="background:blue;"></div>
                                    <div class="color  flexcenter" style="background:black;"></div>
                                    <div class="color  flexcenter" style="background:purple;"></div>
                                </div>

                            </el-form-item> -->
                        </el-col>
                    </el-row>
                </el-col>
                <!-- <el-col :span="8" style="margin-top:180px;">
                    <el-row>
                        <el-col :span="18">
                            <div class="preview">
                                <div class="img flexcenter">
                                    <img src="https://asset.tsign.cn/apps/saas-microfe/seal-manage-front/prod/1.7.2/img/yxz_new.914df624.png"
                                        alt="">
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-col> -->
            </el-form>
        </div>
        <el-dialog title="绘制手绘印章" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div class="flexcenter">
                <Scancertificat :url="scanurl" ref="scanmsg"></Scancertificat>
            </div>
        </el-dialog>
        <div class="padding15All flexright footer">
            <!-- <el-button size="small" @click="goBack">取消</el-button> -->
            <el-button size="small" @click="goBack" type="primary">确认</el-button>
        </div>
    </div>
</template>

<script>
import Scancertificat from "../work/components/scanCertificat.vue"
import { userEnterpriseSealList } from "@/api/userinfo"
import Cookies from 'js-cookie'//获取cookies的信息
import { Message } from 'element-ui'

export default {
    inject: ['closeloading'],
    components:{
        Scancertificat
    },
    data() {
        return {
            radio: '1',
            checked: false,
            ruleForm: {
                name: '',
                scroll: '',
            },
            pararms: {
                signEnterpriseId: "",
                userId: Cookies.get('admin_id')
            },
            dialogVisible: false,
            scanurl: "https://www.signzg.com/handDrawn/index.html?userId="+Cookies.get('admin_id'),//二维码路径

            dataAll:[],
            timer:null,
            sealId:'',
            sealImg:'',

        }
    },
    mounted(){
        let _this=this
        clearInterval(_this.timer);
        this.getseal()
    },
    methods: {
        addSeal(){
            let _this=this
            _this.dialogVisible = true
            var i=60
            clearInterval(_this.timer);
            _this.timer=setInterval(function() {
                if (i < 1) {
                    clearInterval(_this.timer);
                    Message({
                        message: '二维码已过期，请从新添加',
                        type: 'warning',
                        duration: 1000,
                        onClose:()=>{
                            _this.dialogVisible=false
                        }
                    })
                } else {
                    i--;
                    _this.getsealreplace()
                }
            }, 5000)
        },
        getseal() {
            let _this=this
            userEnterpriseSealList(_this.pararms).then(res => {
                _this.closeloading()
                _this.dataAll = res.result.personal
                _this.sealId=res.result.personal[0].sealId
            })
        },
        getsealreplace() {
            let _this=this
            userEnterpriseSealList(this.pararms).then(res => {
                if(res.result.personal[0].sealId!==_this.sealId){
                    Message({
                        message: '添加成功',
                        type: 'success',
                        duration: 2000,
                        onClose:()=>{
                            clearInterval(_this.timer);
                            _this.sealImg=''
                            _this.sealImg=res.result.personal[0].sealImg
                            _this.dialogVisible=false
                        }
                    })
                }
            })
        },
        goBack() {
            this.$router.push({ name: 'sealAdmin' },()=>{})
        },
        handleClose(done) {
            done()
        }
    }
}
</script>

<style lang="scss" scoped>
.upimg {
    width: 400px;
    height: 250px;
    border: 1px dashed rgba(0, 0, 0, .1);
    position: relative;
    p{
        visibility: hidden;
        content: '';
        position: absolute;
        width: 100%;
        height: 40px;
        background-color: #000;
        opacity: .5;
        left: 0;
        bottom: 0;
        color: #fff;
        text-align: center;
    }
    &.bg{
        i{
            visibility: hidden;
        }
        div{
            visibility: hidden;
        }
        p{
            visibility: visible;
        }
    }
}

.upimg:hover {
    border: 1px dashed #0975e0;
}

.addSealAdmin {
    height: 100%;
    position: relative;

    .title-form {
        font-size: 16px;
        font-weight: 500;
        color: #1c1c1c;
        padding-bottom: 20px;
    }

    .title-form:before {
        display: inline-block;
        content: " ";
        width: 3px;
        height: 16px;
        margin-right: 10px;
        background: #1063f1;
        vertical-align: -0.15em;
    }

    .selectSeal {
        width: 100px;

        &.active {
            .img {
                border-color: #0975e0;
                box-shadow: 0 0 12px 3px rgba(0, 0, 0, .1);
            }
        }

        .img {
            position: relative;
            width: 100px;
            height: 100px;
            cursor: pointer;
            align-items: center;
            border: 1px solid #e4e6e9;
            border-radius: 4px;

            img {
                width: 80px;
                display: inline-block;
            }
        }

        p {
            font-size: 12px;
            text-align: center;
            color: #666;
        }
    }

    .color {
        width: 24px;
        height: 24px;
        cursor: pointer;
        border-radius: 2px;
        margin-right: 20px;
        margin-top: 8px;

        &.active {
            i {
                color: #fff;
            }

        }
    }

    .preview {
        .img {
            position: relative;
            width: 283px;
            height: 283px;
            cursor: pointer;
            align-items: center;
            border: 1px solid #e4e6e9;
            border-radius: 4px;
            margin-bottom: 10px;

            img {
                max-width: 242px;
                max-height: 230px;
                display: inline-block;
            }
        }
    }

    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 2px solid #F5F6F7;
        // border-bottom: 2px solid #F5F6F7;
    }
}
</style>